<template>
	<view class="content">

		<view>
			<view class="ipts">
				<view class="hengxian"></view>
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>序号</span>
					</view>
					<span class="place-class">{{info.id}}</span>
				</view>
				<view class="hengxian"></view>
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>设备名称</span>
					</view>
					<span class="place-class">{{info.equipment_name}}</span>
				</view>
				<view class="hengxian"></view>
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>设备编号</span>
					</view>
					<span class="place-class">{{info.equipment_number}}</span>
				</view>
				<view class="hengxian"></view>
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>品牌</span>
					</view>
					<span class="place-class">{{info.brand}}</span>
				</view>
				<view class="hengxian"></view>
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>型号</span>
					</view>
					<span class="place-class">{{info.model}}</span>
				</view>
				<template v-if="info.type">
					<view class="hengxian"></view>
					<view class="info-item">
						<view class="info-item-left">
							<view class="dot"></view>
							<span>规格大小</span>
						</view>
						<span class="place-class">{{info.type}}</span>
					</view>
				</template>
				<view class="hengxian"></view>
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>投运日期</span>
					</view>
					<span class="place-class">{{info.create_date}}</span>
				</view>
				<view class="hengxian"></view>
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>地址</span>
					</view>
					<span class="place-class">{{info.address}}</span>
				</view>
				<view class="hengxian"></view>
			</view>
			<view class="hengxian20"></view>

			<!-- 第二块 -->
			<view class="ipts">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>检查照片</span>
					</view>
					<view class="addform-items" style="flex: 1;flex-wrap: wrap;justify-content: flex-end;">
						<view class="" style="position: relative;height: 60rpx;" v-for="(v,ind) in seeimg"
							:key="ind">
							<image class="form-img" :src="v" @tap="previewImg(seeimg,ind)"></image>
							<image class="delet" v-if="info.status=='0'||info.status=='3'" src="/static/delet.png" @tap="deleteImg('seeimg',ind)">
							</image>
						</view>
						<view class="add" @tap="chooseImages('seeimg')" v-if="info.status=='0'||info.status=='3'">
							<u-icon name="plus" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="hengxian" v-if="list"></view>
				<!-- <template v-if="list.length>0">
					<view class="" v-for="i,idx in list" :key="idx">
						<view :class="list.length>0?'check':''">
							<view class="" style="padding-bottom: 10rpx;">{{i.name}}</view>
							<u-checkbox-group icon-size="30" class="group" size="50" :wrap="true"
								@change="checkboxGroupChange" :disabled="status=='1'">
								<u-checkbox class="group-item" label-size="33" v-model="item.checked"
									v-for="(item, index) in i.children" :key="index" :name="item.id">{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="hengxian"></view>
						<view class="info-item"
							style="flex-direction: column;align-items: baseline;height: 100%;padding: 0px 17px 11rpx;">
							<view class="info-item-left">
								<view class="dot"></view>
								<text style="line-height: 80rpx;">上传{{i.name}}检查照片({{i.children.length}}张)</text>
							</view>
							<view class="addform-items" style="flex: 1;flex-wrap: wrap;justify-content: flex-end;">
								<view class="" style="position: relative;height: 60rpx;" v-for="(v,ind) in seeimg"
									:key="ind">
									<image class="form-img" :src="v" @tap="previewImg(seeimg,ind)"></image>
									<image  v-if="status!='1'" class="delet" src="/static/delet.png" @tap="deleteImg('seeimg',ind)">
									</image>
								</view>
								<view  v-if="status!='1'" class="add" @tap="chooseImages('seeimg',i.children.length)">
									<u-icon name="plus" color="#999999" size="28"></u-icon>
								</view>
							</view>
						</view>
						<view class="hengxian"></view>
					</view>

				</template> -->

				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<span>检查结果</span>
					</view>
					<view class="">
						
					</view>
					<input type="text" :disabled="status" v-model="result" placeholder-style="font-size:28rpx" placeholder="请填写检查结果" />
				</view>
				<view class="hengxian"></view>
				<view class="supplement">
					<view class="info-item">
						<view class="info-item-left">
							<view class="dot"></view>
							<span>备注</span>
						</view>

					</view>
					<view class="explain">
						<textarea v-model="remake" :disabled="status" maxlength="200" auto-height @input="textChange" class="textArea"
							placeholder="请填写备注说明" />
					</view>
					<view class="suppBottom">
						<view class="danger-img-box">
						</view>
						<view class="num">
							<view class="">{{textNumber}}/200</view>
						</view>
					</view>
				</view>
				<view class="hengxian"></view>
				<view style="height: 120rpx;"></view>
			</view>
			<view class="btns" v-if="info.status=='0'||info.status=='3'"> 
				<view class="btn1 consel" @click="navBack(0)">取消</view>
				<!-- <view class="btn1" style="background: rgba(0,54,144,0.3);color: #003690;" @tap="saveData()">保存</view> -->
				<view class="btn1 save" @click="userPost">上传</view>
			</view>
		</view>

		<cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="1" :fixOrientation="true" :size="500"
			:maxWidth="800" :ql="0.7" type="url" />

	</view>
</template>

<script>
	import request from '../../common/request.js'
	import QQMapWX from "@/common/qqmap-wx-jssdk";
	import cpimg from "@/components/cpimg/cpimg.vue"
	import amap from '@/common/amap-wx.js';
	export default {
		components: {
			cpimg
		},
		data() {
			return {
				amapPlugin: null,
				key: '25d8a43c8ee55f7c0e6dfb815fdff544',
				longitude: '',
				latitude: '',
				token: '',
				address: '',
				content: {
					config: '',
					data: ''
				},
				seeimg: [], //检查图片
				urlimg: 'https://trq.wqzsgas.com',
				seeimgzs: [], //检查资料
				imgtype: 0, //0 检查图片。1 记录资料
				project: '', //巡查项目
				result: '', //巡查结果
				remake: '', //备注
				textNumber: 0,
				id: '',
				alltype: '',
				ban: true,
				sercode: [],
				show: false,
				list: [],
				checkbox: [],
				projectArr: [],
				projectid: '',
				projecrChildren: [],
				info: {},
				status: false,
				project_children_text: [],
				type: 'begin',
				draft:[],
				childId: [], //检查项目选中的id
				image:[]
			}
		},
		onShow() {

		},
		computed:{
			
		},
		onLoad(options) {
			this.info = JSON.parse(options.info?options.info:{})
			if(this.info.status!=0){
				this.seeimg = this.info.image
				this.image = this.info.urlimage
				this.remake = this.info.desc
				this.result = this.info.check_result
			}
			this.status = this.info.status == '1'||this.info.status == '2'
		},
		methods: {
			saveData(status=0) {
				var _this = this
				uni.request({
					url: _this.$api + 'staff/setdraft',
					method: 'POST',
					header: {
						token:uni.getStorageSync('token')
					},
					data: {
						alltype: this.alltype,
						detail_id: this.id,
						draft:this.draft.toString(),
						seeimg:this.seeimg.toString(),
						result:this.result,
						remake:this.remake,
					},
					success: (res) => {
						if(res.data.code==1&&status==0){
							_this.$showToast(res.data.msg)
						}else{
							_this.$showToast(res.data.msg)
						}
					}
				})
			},
			previewImg(imgs, index) {
				uni.previewImage({
					urls: imgs,
					current: index
				})
			},
			chooseImages(seeimg) {
				var _this = this
				if (_this[seeimg].length < 5) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['camera'],
						success: (res) => {
							uni.uploadFile({
								url: _this.$fileImg + '/common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								header: _this._header,
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code == 1) {
										_this[seeimg].push(JSON.parse(uploadFileRes
												.data).data
											.intact_url)
											_this.image.push(JSON.parse(uploadFileRes
												.data).data
											.url)
									}
								},
								fail: (err) => {
									console.log(err);
								}
							})
						}
					})
				} else {
					this.$showToast('上传已达到限制')
				}
				// this.getMap()
			},
			deleteImg(fuIndex, index) {
				this[fuIndex].splice(index, 1)
				this.image.splice(index, 1)
			},
			openMap(e) {
				uni.openLocation({
					latitude: e.latitude,
					longitude: e.longitude,
					address: e.address,
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			checkboxGroupChange(e) {
				this.draft = e
			},
			select() {
				this.show = true
			},
			//获取地理位置
			getMap() {
				//获取地理位置信息
				// let that = this;
				// var qqmapsdk;
				// this.amapPlugin.getRegeo({
				// 	success: (data) => {
				// 		uni.hideLoading();
				// 		that.longitude = data[0].longitude
				// 		that.latitude = data[0].latitude
				// 		that.patrolAddTrack(that.type, that.longitude, that.latitude)
				// 	}
				// });
			},
			patrolAddTrack(type, long, lat) {
				var _this = this
				uni.request({
					url: _this.$url + 'patrol.patrol/PatrolAddTrack',
					method: "POST",
					header: _this._header,
					data: {
						type: type,
						long: long,
						lat: lat,
						danger_id: _this.id
					},
					success: (res) => {

					}
				})
			},
			navBack(time, num = 1) {
				setTimeout(() => {
					uni.navigateBack({
						delta: num
					})
				}, time)
			},
			seekimgs(img, index) {
				uni.previewImage({
					urls: img,
					current: index
				})
			},
			//图片预览
			seeimgs(item, ind) {
				let _this = this
				uni.previewImage({
					urls: _this.imgtype == 0 ? _this.seeimg : _this.seeimgzs,
					current: ind,
					loop: true
				})
			},
			deletImg(item, ind) {
				this.imgtype == 0 ? this.seeimg.splice(ind, 1) : this.seeimgzs.splice(ind, 1)
			},
			//选择图片 
			chooseImage(item, index, type, limitNum) {
				var that = this;
				this.imgtype = type
				if (type == 0) {
					if (this.seeimg.length < limitNum) {
						that.$refs.cpimg._changImg()
					} else {
						uni.showToast({
							icon: 'none',
							title: '上传已达到限制'
						})
					}
				} else {
					if (this.seeimgzs.length < 5) {
						that.$refs.cpimg._changImg()
					} else {
						uni.showToast({
							icon: 'none',
							title: '上传已达到限制'
						})
					}
				}
			},

			cpimgOk(file) {
				let that = this
				uni.showLoading({
					title: '上传中...'
				})
				// 上传图片
				uni.uploadFile({
					// url:'https://trq.aoaojiao.online/api/common/upload',
					url: that.$fileImg + '/common/upload',
					filePath: file[0],
					name: 'file',
					formData: {
						token: that.token
					},
					success(res1) {
						let dataPath = JSON.parse(res1.data)
						if (dataPath.code == 1) {
							if (that.imgtype == 0) {
								that.seeimg.push(that.urlimg + dataPath.data.url)
							} else {
								that.seeimgzs.push(that.urlimg + dataPath.data.url)
							}
						}
						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '上传失败'
						})
					}
				});

			},
			cpimgErr(e) {
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				})
				console.log(e)
			},

			textChange(e) {
				if (e.detail.cursor >= 200) {
					uni.showToast({
						title: '最多可以输入200个字',
						icon: 'none'
					})
				}
				console.log(e.detail.cursor)
				this.textNumber = e.detail.cursor
			},

			// 提交保存
			userPost() {
				var _this = this
				if(this.seeimg.length<1) return this.$showToast('请上传检查图片')
				if(!this.result) return this.$showToast('请填写检查结果')
				if(!this.remake) return this.$showToast('请填写备注说明')
				this.saveData(1)
				uni.request({
					url: _this.$api + 'Equipment/setcheckresult',
					method: 'POST',
					header:{
						token:uni.getStorageSync('token')
					},
					data: {
						id:_this.info.id,
						check_result:_this.result,
						desc:_this.remake,
						image:_this.image.toString()
					},
					success: (res) => {
						_this.$showToast(res.data.msg)
						if(res.data.code==1){
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1000)
						}
					}
				})
			},
			danger() {
				uni.navigateTo({
					url: '/pagesB/securityCheck/dangerReport?status=1'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check {
		padding: 20rpx 32rpx;

		.group {
			display: flex;
			flex-direction: column;

			.group-item {
				padding: 20rpx 0;
			}
		}
	}

	.tomaps {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx;
		background-color: #fff;

		.header-left {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
			}
		}

		.header-right {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;

			image {
				width: 52rpx;
				height: 52rpx;
				margin-right: 10rpx;
			}
		}
	}

	.header1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		height: 80rpx;
		width: 100%;
		background-color: #003690;
		padding: 0 40rpx;

		.ipt-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20rpx;
			width: 514rpx;
			height: 52rpx;
			background-color: #fff;
			border-radius: 28rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.header1-right {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #E2ECFB;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.searShow {
		width: 360rpx;
		height: 254rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		image {
			width: 100%;
			height: 100%;
		}
	}

	.dataCont {
		padding-top: 12rpx;
		padding-left: 42rpx;
		padding-right: 30rpx;

		.searTitle {
			font-size: 32rpx;
			font-weight: 600;
			text-align: left;
			color: #333333;
		}

		.searResult {
			display: flex;
			justify-content: space-between;

			.resText {
				font-size: 32rpx;
				font-weight: 400;
				text-align: left;
				color: #777777;
			}

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.ipts {
		background-color: #fff;
	}

	.info-item {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #333;

		input {
			flex: 1;
			text-align: right;
		}

		.dot {
			width: 8rpx;
			height: 8rpx;
			background-color: #003690;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.danger-img {
			width: 75rpx;
			height: 75rpx;
			// border: 2rpx dashed #eee;
			margin-right: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.danger-img-box {
			display: flex;
		}

		.info-item-left {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			// flex: 1;
		}
	}

	.addform-items {
		display: flex;
		align-items: center;

		.delet {
			position: absolute;
			top: -8rpx;
			right: 4rpx;
			width: 28rpx;
			height: 28rpx;
			z-index: 10;
		}

		.form-img {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}

		.add {
			width: 60rpx;
			height: 60rpx;
			border: 1rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.hengxian {
		width: 100%;
		height: 2rpx;
		background-color: #eee;
	}

	.hengxian20 {
		width: 100%;
		height: 20rpx;
		background-color: #eee;
	}

	.place-class {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #333333;
	}

	.btn {
		width: 646rpx;
		height: 80rpx;
		margin: 74rpx auto;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-image: linear-gradient(to bottom, #2366D5, #001B48);
		font-size: 32rpx;
		color: #E5EFFE;
	}

	.btns {
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;
		background: #FFFFFF;
		z-index: 99;

		.btn1 {
			flex: 1;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 28rpx;
		}

		.consel {
			background-color: rgba(233, 233, 233, 0.5);
			color: #777;
		}

		.save {
			background-color: #003690;
			color: #fff;
		}
	}

	.btn:active {
		background: rgba(0, 0, 0, 0.4);
	}

	.zhanwei {
		height: 250rpx;
	}

	.record {
		display: flex;
		align-items: center;
		color: #003690;
		font-size: 32rpx;
		margin-top: 20rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 20rpx 0 30rpx;
		}

		span {
			font-weight: 700;
		}
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		border-bottom: 2rpx solid #eee;

		.record-item-left {
			display: flex;
			align-items: center;

			.shu {
				width: 8rpx;
				height: 28rpx;
				background-color: #003690;
				border-radius: 8rpx;
			}

			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				margin: 0 10rpx;
			}

			.time {
				font-size: 28rpx;
				color: #777;
			}
		}

		.record-item-right {
			display: flex;
			align-items: center;

			.dianhua {
				width: 28rpx;
				height: 28rpx;
			}

			.zhankai {
				width: 36rpx;
				height: 36rpx;
			}

			.title {
				font-size: 32rpx;
				color: #555;
				font-weight: 500;
				margin: 0 10rpx;
			}
		}
	}

	.supplement {
		margin: 0rpx 0rpx;
		background-color: #fff;
		position: relative;
		overflow: hidden;

		.explain {
			.textArea {
				width: 700rpx;
				min-height: 120rpx;
				padding: 14rpx 30rpx;
				font-size: 32rpx;
				text-align: left;
				color: #333333;
			}
		}

		.suppBottom {
			float: right;

			.num {

				margin-right: 26rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
